<%@page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<%
  pageContext.setAttribute("clientToken", request.getParameter("oAuthToken"));
%>

<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Criminal Souls</title>
		<script type="text/javascript" src="${pageContext.request.contextPath}/script/prototype/prototype.js"></script>
		<script type="text/javascript" src="${pageContext.request.contextPath}/script/scripty2/s2.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/script/criminalsouls-api/criminalsouls-api.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/script/latlon/latlon.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/script/client/gui.js"></script>
    <link type="text/css" rel="stylesheet" href="css/theme.css" />
    <link type="text/css" rel="stylesheet" href="css/scripty2/theme.css" />
    <script type="text/javascript">

      var _CRIMINALSOULSAPI = null;
      var _CLIENTGUI = null;
      
      function getCriminalSoulsApi() {
        if (!_CRIMINALSOULSAPI) {
          _CRIMINALSOULSAPI = new CriminalSoulsApi('-', '-', '-', '${clientToken}');
        }
        
        return _CRIMINALSOULSAPI;
      }
      
      function getClientGui() {
    	  return _CLIENTGUI;
      }
      
      function mockPosition(lat, lng) {
    	  getClientGui().setMockedPosition({
    		  coords: {
    			  latitude: lat,
    				longitude: lng
    		  }
    	  });
    	  
        getClientGui().loadScenes();
        getClientGui().loadNearbyUsers();
      }
      
   	  document.observe("dom:loaded", function() {
   		  _CLIENTGUI = new ClientGui();
   		  getClientGui().setView(1, 1);
   		  getClientGui().loadScenes();
   		  getClientGui().loadInventory();
   		  getClientGui().loadStashedItems();
   		  getClientGui().loadNearbyUsers();
   		  getClientGui().loadConfirmedFriends();
        getClientGui().loadUnconfirmedFriends();
      });
    </script>
	</head>
	<body> 
	  <div id="views">
	    <div class="view leftView hasSideBarRight" id="othersView">
        <div class="sideBar sideBarRight" onclick="getClientGui().moveToView(1, 1);">
          <div class="sideBarTitleContainer">
            <div class="sideBarTitleInnerContainer">
              <div class="sideBarTitle">Scenes</div>
            </div>          
          </div>
        </div>
        
        <div class="viewContent">
          <div id="othersView-tabs"> 
            <ul> 
              <li><a href="#othersView-friends">Friends</a></li>
              <li><a href="#othersView-nearby">Nearby</a></li> 
            </ul> 
            <div id="othersView-friends">
              <div class="section listSection">
                <div class="sectionTitle">Friend requests</div>
                <div class="listSectionListContainer" id="othersView-friendRequestsList"> </div>
              </div>            
              
              <div class="section listSection">
                <div class="sectionTitle">Friends</div>
                <div class="listSectionListContainer" id="othersView-friendsList"> </div>
              </div>            
            </div>
            <div id="othersView-nearby">
		          <div class="section listSection">
		            <div class="sectionTitle">Nearby players</div>
		            <div class="listSectionListContainer" id="othersView-nearbyList">
		              
		            </div>
		          </div>
            </div>
          </div>
        </div>
	    </div>
	    
	    <div class="view rightView hasSideBarLeft" id="hereView">
        <div class="sideBar sideBarLeft" onclick="getClientGui().moveToView(1, 1);">
          <div class="sideBarTitleContainer">
            <div class="sideBarTitleInnerContainer">
              <div class="sideBarTitle">Scenes</div>
            </div>          
          </div>
        </div>
        
        <div class="viewContent">
          <div class="section labelSection">
            <div class="sectionTitle">Here</div>
            <div class="labelSectionLabel" id="hereView-name"></div>
          </div>
          
          <div class="section labelSection">
            <div class="sectionTitle">Category</div>
            <div class="labelSectionLabel" id="hereView-category"></div>
          </div>
          
          <div class="section listSection">
            <div class="sectionTitle">Tasks</div>
            <div class="listSectionListContainer" id="hereView-tasksList">
              
            </div>
          </div>
          
          <div class="section listSection" id="hereView-stashedItemsSection">
            <div class="sectionTitle">Stashed items</div>
            <div class="listSectionListContainer" id="hereView-stashedItemsList">
            </div>
          </div>
        </div>
      </div>
      
      <div class="view topView hasSideBarBottom" id="meView">
        <div class="sideBar sideBarBottom" onclick="getClientGui().moveToView(1, 1);">
          <div class="sideBarTitleContainer">
            <div class="sideBarTitleInnerContainer">
              <div class="sideBarTitle">Scenes</div>
            </div>          
          </div>
        </div>
        
        <div class="viewContent">
          <div id="meView-tabs"> 
            <ul> 
              <li><a href="#meView-inventory">Inventory</a></li> 
              <li><a href="#meView-stashed">Stashed items</a></li> 
              <li><a href="#meView-stats">Stats</a></li> 
            </ul> 
              <div id="meView-inventory">
                <div class="section labelSection">
			            <div class="sectionTitle">Money</div>
			            <div class="labelSectionLabel" id="meView-money">0.00 IBCS</div>
			          </div>
              
                <div class="section gridSection">
			            <div class="sectionTitle">Items</div>
			            <div class="listSectionGridContainer" id="meView-inventoryItemsGrid">
			            </div>
			          </div>
              </div>  
              <div id="meView-stashed">
                <div class="section gridSection">
                  <div class="sectionTitle">Stashed items</div>
                  <div class="listSectionGridContainer" id="meView-inventoryStashedItemsGrid">
                  </div>
                </div>
              </div> 
              <div id="meView-stats">
                TODO: This tab should contain information about player stats
              </div>
          </div>
        </div>
      </div>
      
      <div class="view bottomView hasSideBarTop" id="marketView">
        <div class="sideBar sideBarTop" onclick="getClientGui().moveToView(1, 1);">
          <div class="sideBarTitleContainer">
            <div class="sideBarTitleInnerContainer">
              <div class="sideBarTitle">Scenes</div>
            </div>          
          </div>
        </div>
        
        <div class="viewContent">
          <div id="marketView-tabs"> 
            <ul> 
              <li><a href="#marketView-blackMarket">Black market</a></li>
              <li><a href="#marketView-shop">Shop of Criminal Souls</a></li> 
            </ul> 
            <div id="marketView-blackMarket">
              TODO: This tab should contain information about black market
            </div>
            <div id="marketView-shop">
              TODO: This tab should contain information about shop
            </div>
          </div>
        </div>
      </div>
      
      <div class="view centerView hasSideBarLeft hasSideBarRight hasSideBarTop hasSideBarBottom">
        <div class="sideBar sideBarLeft" onclick="getClientGui().moveToView(0, 1);">
          <div class="sideBarTitleContainer">
            <div class="sideBarTitleInnerContainer">
              <div class="sideBarTitle">Others</div>
            </div>          
          </div>
        </div>
        
        <div class="sideBar sideBarRight" onclick="getClientGui().moveToView(2, 1);" id="scenesView-hereSideBar">
          <div class="sideBarTitleContainer">
            <div class="sideBarTitleInnerContainer">
              <div class="sideBarTitle">Here</div>
            </div>          
          </div>
        </div>
        
        <div class="sideBar sideBarTop" onclick="getClientGui().moveToView(1, 0);">
          <div class="sideBarTitleContainer">
            <div class="sideBarTitleInnerContainer">
              <div class="sideBarTitle">Me</div>
            </div>          
          </div>
        </div>
        
        <div class="sideBar sideBarBottom" onclick="getClientGui().moveToView(1, 2);">
          <div class="sideBarTitleContainer">
            <div class="sideBarTitleInnerContainer">
              <div class="sideBarTitle">Market</div>
            </div>          
          </div>
        </div>
        
        <div class="viewContent">
          <div class="section listSection">
            <div class="sectionTitle">Scenes</div>
            <div class="listSectionListContainer" id="scenesView-scenesList">
              
            </div>
          </div>
          
        </div>
      </div>
	  </div>
	</body>
</html>